/*
 * @Author: Zhang Kai
 * @Date: 2022-03-07 16:49:33
 * @LastEditors: mayijun
 * @LastEditTime: 2022-08-12 13:34:53
 * @FilePath: /metricsx-standard-ui/src/views/indexlib/components/fieldInfo/index.tsx
 */
import { defineComponent, PropType } from 'vue';
import './index.scss';
import Question from '@/assets/images/question.svg';

//指标库展开收起业务组件
const FieldInfo = defineComponent({
  name: 'FieldInfo',
  components: { Question },
  props: {
    val: {
      type: Object,
      default: () => ({})
    },
    info: {
      type: Object,
      default: () => {}
    }
  },
  setup: (props) => {
    return () => {
      const { val, info } = props;
      return (
        <>
          {val?.isCheck ? (
            <div class="field-info-wrap">
              <div class="label">{`${val && val.label}:`}</div>
              {Array.isArray(info?.[val.prop]) ? (
                val && info?.[val.prop].length ? (
                  <div class="is-array">
                    {info?.[val.prop]?.map((v: any, i: number) => (
                      <span class="item">
                        {val.prop != "arithmeticList" && (<span>{v?.cnName || '-'}</span>)}
                        {val.prop == "arithmeticList" && (<span>{info?.["calculationFormula"] || '-'}</span>)}
                      </span>
                    ))}
                  </div>
                ) : undefined
              ) : (
                <>
                  <div class="value">
                    {Object.prototype.toString.call(info?.[val.prop]) ===
                    '[object Object]'
                      ? info?.[val.prop]?.cnName || '-'
                      : info?.[val.prop] || '-'}
                    {info?.[val.prop]?.businessMeaning && (
                      <el-tooltip
                        effect="dark"
                        content={info?.[val.prop]?.businessMeaning || '-'}
                        placement="top"
                      >
                        <img src={Question} alt="" />
                      </el-tooltip>
                    )}
                  </div>
                </>
              )}
            </div>
          ) : undefined}
        </>
      );
    };
  }
});

export default FieldInfo;
